<template>
  <footer class="section website-information fp-auto-height">
    <div class="layout">
      <div class="footer_top">
        <div class="t_left">
          <div class="route-box">
            <div class="route-item" v-for="(item, index) in footer_routes" :key="index">
              <h3>{{ item.title }}</h3>
              <ul>
                <li v-for="itm in item.list" :key="itm.id" @click="toDetail(itm.router,itm.id,itm.urlName?itm.urlName:null,itm.urlName?item.id:null)">
                  {{ itm.title }}
                </li>
              </ul>
            </div>
          </div>
          <div class="school_info">
            <div>
              <label>联系电话：（010）</label>
              <p>010-88818900 010-88815809 010-88815810</p>
            </div>
            <div>
              <label>邮箱：</label>
              <p>liuxue@bfsu.edu.cn</p>
            </div>
            <div>
              <label>地址：</label>
              <p>北京市大兴区创新路2号北京外国语大学国际商学院创新校区</p>
            </div>
          </div>
        </div>
        <div class="t_right">
          <h3>社交媒体</h3>
          <ul>
            <li v-for="(item, idx) in sjmt" :key="idx">
              <img :src="item.imgUrl" alt="" />
            </li>
          </ul>
          <div class="logos">
            <div class="logo_left">
              <img src="../../assets/img/f-logo1.png" alt="" />
              <img src="../../assets/img/f-logo2.png" alt="" />
            </div>
            <div class="logo_right">
              <img src="../../assets/img/f-logo3.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="record">
        Copyright @ 2015-2024 北京外国语大学 京ICP备10216160号-15
      </div>
    </div>
  </footer>
</template>
<script>
import Vue from "vue";
import {
  toRefs,
  getCurrentInstance,
  reactive,
  onMounted,
  ref
  // shallowRef
} from "vue";
// import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

export default {
  name: "Footer",
  setup() {
    const { proxy } = getCurrentInstance();

    const router = useRouter();
    let dataObj = reactive({
      footer_routes: [
        // {
        //   title: "首页",
        //   id: "0",
        //   router: "/index"
        // },

        {
          title: "关于我们",
          id: "1",
          list: [
            {
              router: "/information",
              title: "北京外国语大学",
              id: "1-1",
              urlName: "bfsu"
            },
            {
              router: "/information",
              title: "国际商学院",
              id: "1-2",
              urlName: "ibs"
            },
            {
              router: "/information",
              title: "愿景使命",
              id: "1-3",
              urlName: "vision"
            },
            {
              router: "/information",
              title: "院长致辞",
              id: "1-4",
              urlName: "dean_speech"
            },
            {
              router: "/information",
              title: "资质认证",
              id: "1-5",
              urlName: "cert"
            },
            {
              router: "",
              title: "新闻咨询",
              id: "1-6"
            },
            {
              router: "",
              title: "联系我们",
              id: "1-7"
            }
          ]
        },
        {
          title: "项目介绍",
          id: "2",
          list: [
            {
              title: "商学+艺术1+3预科项目",
              router: "",
              id: "2-1"
            },
            {
              title: "冬夏令营项目",
              router: "",
              id: "2-2"
            }
          ]
        },
        {
          title: "招生录取",
          id: "3",
          list: [
            {
              title: "招生简章",
              router: "/information",
              id: "3-1"
            },
            {
              title: "申请流程",
              router: "/information",
              id: "3-2"
            },
            {
              title: "招生活动",
              router: "",
              id: "3-3"
            }
          ]
        },
        {
          title: "学术架构",
          id: "4",
          list: [
            {
              title: "培养体系",
              router: "/overview",
              id: "4-1"
            },
            {
              title: "招收专业",
              router: "/major",
              id: "4-2"
            },
            {
              title: "课程设置",
              router: "/information",
              id: "4-3"
            },
            {
              title: "师资团队",
              router: "",
              id: "4-4"
            },
            {
              title: "对接大学",
              router: "",
              id: "4-5"
            },
            {
              title: "学术论坛",
              router: "",
              id: "4-6"
            }
          ]
        },
        {
          title: "作品展示",
          id: "5",
          list: [
            {
              title: "时尚管理/奢侈品管理/时尚营销/时尚传播与造型",
              router: "",
              id: "5-1"
            },
            {
              title: "动画设计/游戏设计/交互设计",
              router: "",
              id: "5-2"
            },
            {
              title: "视觉传达/插画/平面设计",
              router: "",
              id: "5-3"
            },
            {
              title: "艺术摄影/时尚摄影",
              router: "",
              id: "5-4"
            },
            {
              title: "传媒/文化产业",
              router: "",
              id: "5-5"
            },
            {
              title: "校园杂志",
              router: "",
              id: "5-6"
            }
          ]
        },
        {
          title: "学生生活",
          id: "6",
          list: [
            {
              title: "图解校园",
              router: "/information",
              id: "6-1"
            },
            {
              title: "社团活动",
              router: "",
              id: "6-2"
            },
            {
              title: "社会实践",
              router: "",
              id: "6-3"
            },
            {
              title: "讲座沙龙",
              router: "",
              id: "6-4"
            },

            {
              title: "学生大使",
              router: "",
              id: "6-5"
            }
          ]
        },
        {
          title: "发展前景",
          id: "7",
          list: [
            {
              title: "历年录取",
              router: "/information",
              id: "7-1"
            },
            {
              title: "校友访谈",
              router: "",
              id: "7-2"
            },
            {
              title: "职业规划",
              router: "/information",
              id: "7-3"
            }
          ]
        }
      ],
      sjmt: [
        {
          imgUrl: require("../../assets/img/icon-wx.png")
        },
        {
          imgUrl: require("../../assets/img/icon-sph.png")
        },
        {
          imgUrl: require("../../assets/img/icon-wb.png")
        },
        {
          imgUrl: require("../../assets/img/icon-xhs.png")
        },
        {
          imgUrl: require("../../assets/img/icon-dy.png")
        },
        {
          imgUrl: require("../../assets/img/icon-b.png")
        }
      ]
    });
    // const toDetail = (path, activeId) => {
    //   var preActiveId = activeId.split("-")[0];
    //   dataObj.preActiveId = preActiveId;
    //   dataObj.activeId = activeId;
    //   window.localStorage.setItem("activeId", activeId);
    //   window.localStorage.setItem("preActiveId", preActiveId);
    //   router.push({ path: path });
    // };
    const toDetail = (path, activeId = "0", urlName, preActiveId) => {
      if (activeId == "0") {
        dataObj.preActiveId = "0";
        dataObj.activeId = "0";
        window.localStorage.setItem("activeId", "0");
        window.localStorage.setItem("preActiveId", "0");
      } else {
        var preActiveId = activeId.split("-")[0];
        dataObj.preActiveId = preActiveId;
        dataObj.activeId = activeId;
        window.localStorage.setItem("activeId", activeId);
        window.localStorage.setItem("preActiveId", preActiveId);
      }
      if (urlName) {
        router.push({ path: path, query: { urlName, preActiveId, activeId } });
      } else {
        router.push({ path: path });
      }
    };
    return {
      ...toRefs(dataObj),
      toDetail: toDetail
      // ...methods,
      // onSwiper,
      // onSlideChange,
      // modules: [Navigation]
    };
  }
};
</script>
<style scoped lang="scss">
.website-information {
  width: 100%;
  // height: 500px !important;
  padding: 50px 0 30px 0;
  background: #2a2a2a;
  .layout {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .footer_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .t_left {
        .route-box {
          display: flex;
          color: #fff;

          .route-item {
            margin-right: 26px;
            h3 {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #ffffff;
              line-height: 18px;
              text-align: left;
              font-style: normal;
            }
            ul {
              margin-top: 30px;

              li {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
                line-height: 18px;
                text-align: left;
                font-style: normal;
                cursor: pointer;
                margin-bottom: 4px;
              }
            }
          }
          // .route-item:nth-child(5){
          //   width: 280px;
          // }
        }
        .school_info {
          width: 597px;
          margin-top: 40px;
          > div {
            display: flex;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            line-height: 18px;
            text-align: left;
            font-style: normal;
            margin-top: 4px;
            label {
              flex-shrink: 0;
              // width: 40px;
            }
          }
        }
      }
      .t_right {
        h3 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          line-height: 18px;
          text-align: left;
          font-style: normal;
        }
        ul {
          display: flex;
          margin-top: 40px;
          li {
            margin-right: 20px;
            cursor: pointer;

            img {
              height: 24px;
              display: block;
            }
          }
        }
        .logos {
          display: flex;
          margin-top: 35px;
          .logo_left {
            display: flex;
            flex-direction: column;
            img {
              width: 130px;
              display: block;
              margin-bottom: 24px;
            }
          }
          .logo_right {
            margin-left: 53px;
            img {
              width: 113px;
            }
          }
        }
      }
    }
    .record {
      width: 100%;
      margin-top: 80px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      line-height: 18px;
      text-align: left;
      font-style: normal;
      text-align: center;
    }
  }
}
</style>
